<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏背包管理</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <header class="main-header">
            <h1>🎒 我的游戏背包</h1>
            <nav class="main-nav">
                <select id="character-select"></select>
                <button id="fight-btn">打怪</button>
                <button id="highlight-btn">一键整理（智能推荐）</button>
                <button id="shop-btn">金币商城</button>
            </nav>
        </header>
        <main class="main-layout">
            <aside class="side-panel left-panel">
                <section class="monster-info-card card">
                    <h2>怪物信息</h2>
                    <div id="monster-info"></div>
                </section>
                <section class="env-card card">
                    <h2>周围物品</h2>
                    <ul id="env-list" class="env-list droppable" data-type="env"></ul>
                </section>
            </aside>
            <section class="center-panel">
                <section class="bag-card card">
                    <div class="bag-header">
                        <span class="bag-title">🎒 背包</span>
                        <div class="bag-pagination">
                            <button id="bag-prev">上一页</button>
                            <span id="bag-page-info"></span>
                            <button id="bag-next">下一页</button>
                        </div>
                    </div>
                    <ul id="bag-list" class="bag-list droppable" data-type="bag"></ul>
                </section>
                <section class="equip-card card">
                    <h2>装备栏</h2>
                    <div id="equipments" class="equipments"></div>
                    <div id="character-attributes" class="character-attributes"></div>
                </section>
            </section>
            <aside class="side-panel right-panel">
                <section class="skills-card card">
                    <h2>技能栏</h2>
                    <div id="skills-box" class="skills-box"></div>
                </section>
                <section class="status-card card">
                    <h2>人物状态</h2>
                    <div id="character-status" class="character-status"></div>
                </section>
            </aside>
        </main>
        <!-- 通用弹窗区 -->
        <div id="detail-modal" class="modal" style="display:none;">
            <div class="modal-content"></div>
        </div>
        <div id="throw-modal" class="modal" style="display:none;">
            <div class="modal-content">
                <span id="close-throw-modal" class="close">&times;</span>
                <h2>抛弃物品</h2>
                <form id="throw-form">
                    <div style="margin-bottom:12px;">
                        <label id="throw-label" for="throw-qty">请输入要抛弃的数量：</label><br>
                        <input type="number" id="throw-qty" min="1" value="1" required>
                    </div>
                    <button type="submit">确定</button>
                    <button type="button" id="cancel-throw-btn">取消</button>
                </form>
            </div>
        </div>
        <div id="modal" class="modal" style="display:none;">
            <div class="modal-content">
                <span id="close-modal" class="close">&times;</span>
                <h2>添加/编辑物品</h2>
                <form id="item-form">
                    <label>名称：<input type="text" id="item-name" required></label><br>
                    <label>描述：<input type="text" id="item-desc" required></label><br>
                    <label>数量：<input type="number" id="item-qty" min="1" value="1" required></label><br>
                    <button type="submit">保存</button>
                </form>
            </div>
        </div>
        <div id="shop-modal" class="modal" style="display:none;">
            <div class="modal-content">
                <span id="close-shop-modal" class="close">&times;</span>
                <h2>商城</h2>
                <div>
                    <label>选择物品：
                        <select id="shop-item-select"></select>
                    </label>
                </div>
                <div>
                    <label>数量：<input type="number" id="shop-qty" min="1" value="1"></label>
                </div>
                <button id="shop-buy-btn">购买</button>
            </div>
        </div>
        <div id="skill-select-modal" class="modal" style="display:none;">
            <div class="modal-content">
                <span id="close-skill-select-modal" class="close">&times;</span>
                <h2>请选择要学习的技能</h2>
                <form id="skill-select-form">
                    <div id="skill-options"></div>
                    <button id="skill-learn-btn" type="submit">学习</button>
                </form>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>

</html>